<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet"  href="./css/details.css">
	<link rel="stylesheet" href="./css/shopdetails.css">
</head>
<body>
	<header>
		<div class="top content">
			<div class="left">
				<a href="#" class="topFou">电脑版</a>
				<a href="#">手机版</a>
			</div>
			<div class="right">
				<span>您好，欢迎来到交易猫！</span>
				<span>|</span>
				<span><a href="./login.html">登录</a></span>
				<span>|</span>
				<span><a href="./shopcar.html">购物车</a></span>
				<span>|</span>
				<span><a href="">我是卖家</a></span>
				<span>|</span>
				<span><a href="">下载APP</a></span>
			</div>
		</div>
		<div class="logo content">
			<img src="https://image.jiaoyimao.com/public/pc/images/logo.png?2022063014" alt="">
			<div class="nav-search">
				<ul>
					<li class="search-select">选择游戏 <span></span> </li>
					<li class="search-select">商品类型 <span></span> </li>
					<li class="search-select">请选择 <span></span> </li>
					<li class="search-inp"><input type="text" placeholder="请输入游戏/商品/店铺"></li>
					<li class="searchBtn"><input type="submit" value="搜索"></li>
				</ul>
			</div>
		</div>
	</header>
	<div class="nav">
		<ul>
			<li><a href="./index.html" class="navFou">首页</a></li>
			<li><a href="./shopList.html">商品列表</a></li>
			<li><a href="">端游</a></li>
			<li><a href="">租号</a></li>
			<li><a href="">首充号</a></li>
			<li><a href="./detail.html">代练</a></li>
			<li><a href="./shopcar.html">个人中心</a></li>
			<li><a href="">帮助中心</a></li>
		</ul>
	</div>
    <div class="box">
        <div class="small">
            <img src="" alt="" class="smallImage">
            <div class="move"></div>
        </div>
        <div class="big">
            <img src="" alt="" class="bigImage">
        </div>
    </div>
    <div>
        <ul class="list">
            <li>
                <img class="inner" src="//img10.360buyimg.com/n1/jfs/t1/81728/8/20051/143249/62bd5a9fE0f5fc845/9732550b4ccae888.jpg" alt="">
            </li>
        </ul>
    </div>
	<div class="footer-wrap">
		<footer>
			<div class="footer-link">
				<ul>
					<li>
						<strong>新手入门</strong>
						<a href="">如何购买商品</a>
						<a href="">如何发布商品</a>
					</li>
					<li>
						<strong>诚信服务</strong>
						<a href="">用户协议</a>
						<a href="">隐私权协议</a>
						<a href="">儿童个人信息保护规则</a>
						<a href="">免责声明</a>
						<a href="">7*24小时服务</a>
					</li>
					<li>
						<strong>交易保障</strong>
						<a href="">寄售交易</a>
						<a href="">支付宝交易</a>
						<a href="">投诉与建议</a>
					</li>
					<li>
						<strong>售后服务</strong>
						<a href="">在线咨询</a>
					</li>
					<li>
						<strong>关于我们</strong>
						<a href="">关于交易猫</a>
						<a href="">联系我们</a>
					</li>
				</ul>
			</div>
			<div class="certification">
				<a href=""><i class="pic1"></i>安全认证联盟</a>
				<a href=""><i class="pic2"></i></a>
			</div>
			<div class="company-info">
				<p>
					© 2013-2022 jiaoyimao.com &nbsp; &nbsp; 版权所有 &nbsp;&nbsp;
					粤ICP备14053110号 &nbsp;&nbsp;
					增值电信业务经营许可证：粤B2-20150064 &nbsp;&nbsp;
					营业执照
				</p>
			</div>
		</footer>
	</div>
    <script src="./js/jquery.js"></script>
    <script>
       //控制小盒子里面的移动盒子的移动 来实现图片在大盒子里面的移动
       $('.small').hover(function(){
            //控制显示
            $('.move').css('display','block')
            $('.big').css('display','block')
       },function(){
            //控制隐藏
            $('.move').css('display','none')
            $('.big').css('display','none')
       })
       $('.small').mousemove(function(e){
         //获取鼠标在盒子里面的位置
         //当前页面的位置 - 盒子在页面上的位置
         var mouseX =  e.pageX - $(this).offset().left
         var mouseY =  e.pageY - $(this).offset().top
         //获取移动的目标点位置 = 当前鼠标位置 - 中心点位置
         var target = {
            x: mouseX - $('.move').outerWidth()/2,
            y: mouseY - $('.move').outerHeight()/2
         }
         //边界判断
        // 父盒子尺寸-自己的盒子尺寸 = 最大移动距离
            let maxWidth =  $(this).innerWidth() - $('.move').outerWidth()
            let maxHeight =  $(this).innerHeight() - $('.move').outerHeight()
            if(target.x<0){
                target.x=0
            }
            if(target.y<0){
                target.y=0
            }
            if(target.x>maxWidth){
                target.x = maxWidth
            }
            if(target.y>maxHeight){
                target.y = maxHeight
            }
        //设置对应的位置
        $('.move').css('left',target.x)
        $('.move').css('top',target.y)
        //设置大盒子里面图片的位置 bigImage/small = big/move
        $('.bigImage').css('left',target.x*$('.bigImage').innerWidth()/$('.small').innerWidth()*-1)
        $('.bigImage').css('top',target.y*$('.bigImage').innerWidth()/$('.small').innerWidth()*-1)
       })
    </script>
    <script>
        //获取对应的url的地址栏
        //http://www.baidu.com?id=1&username=2
        // console.log(location.href.split("?")[1].split("&")); //将对应的id=1 和username=2 全部变成对象里面的属性
      function getParams(){
           //用于存参数的对象
            let params = {}
			console.log(location.href.split("?")[1].split("&")); 
            location.href.split("?")[1].split("&").forEach(str => {
                var strArr = str.split("=")
                params[strArr[0]] = strArr[1]
            });
            return params
      }
      function rander(){
        // getParams()
        $.ajax({
            type: "get",
            url: "http://localhost:9900/shops/"+getParams().id,
            dataType: "json",
            contentType:"application/json",
            success: function (response) {
                // console.log(response);
                //将一张图片存放对应的地方
                $('.smallImage').prop('src',response.specList[0])
                $('.bigImage').prop('src',response.specList[0])
                //下面的数据需要填充
                //获取第一张图片修改原本的默认图片
                $('.list>li>img').prop('src',response.specList[0])
                response.specList.forEach((imgUrl,index)=>{
                  var $li =  $('.list').children('li').eq(0).clone()
                  $li.children('img').prop('src',imgUrl)
                  if(index!=0){
                    $('.list').append($li)
                  }
                })
                 //给对应的li添加事件
                $('.list>li').hover(function(){
                    console.log('调用了');
                    //控制大图和对应的小图的src变化
                    $('.smallImage').prop('src',$(this).children('img').prop('src'))
                    $('.bigImage').prop('src',$(this).children('img').prop('src'))
                })
            }
        });
      }
      rander()
    </script>
</body>

</html>